<template>
  <div class="route-test">
    <h1>路由测试页面</h1>
    <p>如果你能看到这个页面，说明基本路由功能正常</p>
    
    <div class="test-info">
      <h3>当前路由信息：</h3>
      <p>路径: {{ $route.path }}</p>
      <p>名称: {{ $route.name }}</p>
      <p>参数: {{ JSON.stringify($route.params) }}</p>
      <p>查询: {{ JSON.stringify($route.query) }}</p>
    </div>
    
    <div class="navigation-test">
      <h3>导航测试：</h3>
      <el-button @click="goToLogin">跳转到登录页</el-button>
      <el-button @click="goToAdmin">跳转到后台首页</el-button>
    </div>
    
    <div class="store-info">
      <h3>存储状态：</h3>
      <p>用户登录状态: {{ userStore.isLoggedIn }}</p>
      <p>用户信息: {{ JSON.stringify(userStore.userInfo) }}</p>
      <p>菜单数量: {{ menuStore.menuTree.length }}</p>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useMenuStore } from '@/stores/menu'

const router = useRouter()
const userStore = useUserStore()
const menuStore = useMenuStore()

const goToLogin = () => {
  router.push('/login')
}

const goToAdmin = () => {
  router.push('/admin')
}
</script>

<style scoped>
.route-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-info, .navigation-test, .store-info {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.navigation-test .el-button {
  margin-right: 10px;
}
</style>